<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="根据关键字搜索队伍" @search="onSearch(searchText)"/>
    <van-button type="primary" @click="doJoinTeam" size="large" color="green">创建队伍</van-button>
    <TeamCardList :team-list="teamList"/>
    <van-empty description="暂无查询数据" v-if="teamList.length===0"/>
  </div>

</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import myAxios from "../plugins/myAxios.js";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast} from "vant";
const router = useRouter();

//点击按钮跳转页面
const doJoinTeam=()=>{
  router.push("/team/add")
}

//响应数据
const teamList=ref([])

//初始化队伍列表
onMounted( ()=>{
  listTeam('')
}
)

//搜索队伍关键字
const searchText=ref('')

const onSearch= (val)=>{
 listTeam(val)
}

//抽取查询队伍列表方法
const listTeam=async (val)=>{
  const res=await myAxios.get("/team/list",{
    params:{
      searchText:val
    }
  })
  if (res.code===0 && res.data){
    teamList.value=res.data
    if (val){
      showSuccessToast('查询成功')
    }
  }else {
    if (val){
      showFailToast('查询失败,'+res.message)
    }
  }
}

</script>

<style scoped>

</style>